<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">

<style>
	.ban{
	  background-color: #409EFF !important; /* Element UI 的蓝色 */  
  	border-color: #409EFF !important; /* 确保边框也是蓝色 */  
  	color: #FFFFFF !important; /* 文本颜色，根据需要调整 */
	}
</style>

</head>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="类别名称">
              <el-input v-model="type.tname" placeholder="类别名称"></el-input>
            </el-form-item>
            
            <el-form-item label="状态">
              <el-select v-model="type.status" placeholder="权限">
              	<el-option label="所有" value="-1"></el-option>
                <el-option label="下架" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="show">查询</el-button>
            </el-form-item>
          </el-form>

          <!--表格显示-->
          <el-table
          :data="members"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          align="center"
          label="类别编号"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.tid }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          align="center"
          label="类别名称"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.tname }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          align="center"
          label="类别数量"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.count }}</span>
          </template>
          </el-table-column>
          
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 1"
          	size="mini"
          	type="danger"
          	class="ban"
          	@click="down(scope.$index, scope.row)">下架</el-button>
          	<el-button v-if="scope.row.status == 0"
          	size="mini"
          	type="danger"
          	@click="up(scope.$index, scope.row)">上架</el-button>
          </template>
          </el-table-column>
        </el-table>

        <!--添加类别按钮-->
        <br/>
        <el-button class="bt1" type="success" plain @click="open">添加类别</el-button>
    </el-card>

    <!--添加类别弹框-->
    <el-dialog title="添加类别" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="类别名称">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renew">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    
    <!--添加修改弹框-->
    <el-dialog title="修改类别信息" :visible.sync="updateType">
      <el-form>
        <el-form-item label="类别名称">
          <el-input v-model="tname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renew">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
</div>

<script src="../../js/vue.js"></script>
<script src="../../js/axios.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/qs.js"></script>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      type: {
        tname: '',
        status:''
      },
      members: [],
      dialogFormVisible: false,
      updateType: false,
	  name:'',
	  updateData: {},
	  tname:''
    },
    mounted() {
    	
    },
    methods: {
      //打开弹框
      open(){
        this.dialogFormVisible = true;
      },
      //恢复
      renew(){
    	  this.dialogFormVisible = false;
    	  this.updateType = false;
    	  this.name = "";
    	  this.tname = this.updateData.tname;
      },
      //添加类别
      add(){
    	  if(this.name == null || this.name == ""){
    		  alert("请输入类别名称");
    		  this.dialogFormVisible = false;
    		  return;
    	  }
		axios.post("../../typeController/add", qs.stringify({
			name:this.name
		})).then(resp=>{
			if(resp.data > 0){
				alert("添加成功");
			}else{
				alert("添加失败");
			}
			this.dialogFormVisible = false;
			this.name = "";
		});
      },
      //获取类别
      getType() {
        axios.get("../../typeController/gettype").then(resp=>{
        	this.members = resp.data;
        });
      },
      //编辑查看
      handleEdit(index, obj){
    	  this.updateData = obj;
    	  this.tname = this.updateData.tname;
    	  this.updateType = true;
		},
		
	  //修改类别
	  update(){
			axios.post("../../typeController/updatetype",qs.stringify({
				tid:this.updateData.tid,
				tname:this.tname
			})).then(resp=>{
				if(resp.data > 0){
					alert("修改成功");
					this.getType();
				}else{
					alert("修改失败");
					this.tname = this.updateData.tname;
				}
				this.updateType = false;
			});
		},
		//条件查询类别
		show(){
			axios.get("../../typeController/getbytype",{
				params:this.type
			}).then(resp=>{
				this.members = resp.data;
			});
		},
		//下架
	    down(index, obj){
	    	axios.post("../../typeController/down",qs.stringify({
	    		tid:obj.tid
	    	})).then(resp=>{
	    		if(resp.data > 0){
	    			alert("下架类别成功");
	    			//继续条件查询
	    			this.show();
	    		}else{
	    			alert("下架类别失败");
	    		}
	    	});
	    },
	    //上架
	    up(index, obj){
	    	axios.post("../../typeController/up",qs.stringify({
	    		tid:obj.tid
	    	})).then(resp=>{
	    		if(resp.data > 0){
	    			alert("上架类别成功");
	    			//继续条件查询
	    			this.show();
	    		}else{
	    			alert("上架类别失败");
	    		}
	    	});
	    },
    },
	created(){
		this.getType();
	}
  });
</script>

</body>
</html>